<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>*,html,body{padding:0px;margin:0px;}</style>
<link rel="stylesheet" href="__STATIC__/avatar/cropper.min.css" />
<script type="text/javascript" charset="utf-8" src="__STATIC__/jquery-2.0.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="__STATIC__/avatar/cropper.min.js"></script>
<script type="text/javascript" charset="utf-8" src="__STATIC__/avatar/jquery.form.min.js"></script>
<style>
.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;}.file input {
    position: absolute;
    font-size: 22px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;

}
.group-avatar{
    width: 200px;
    margin: 0 auto;
}
.group-avatar .file{
  float: left;
  margin-left: 10px;
}
</style>
<div class="cutbox">
    <img id="avatar-img" width="300" src="<empty name="picInfo.pic_id">__STATIC__/avatar/avatar.png <else /> {$picInfo.path} </empty>" alt="">
</div>
<hr size="2" />
<form id="avatar_form" action="{:addons_url('Avatar://Avatar/savePic')}" save-url="" method="post" enctype="multipart/form-data">
  <input type="hidden" name="pic_id" value="" />
  <input type="hidden" name="s_path" value="" />
  <input type="hidden" name="w" value="" />
  <input type="hidden" name="h" value="" />
  <input type="hidden" name="x" value="" />
  <input type="hidden" name="y" value="" />
  <div class="group-avatar">
      <a href="javascript:;" class="file">选择文件<input  type="file" name="imgFile" id="avatar"></a>
      <a href="javascript:;" class="file">保存头像<input class="file" type="submit" /></a>
  </div>
</form>
<!-- 
  配置项可以设置有：  裁剪图片比例
                      裁剪图片前缀
                      裁剪图片后回调地址
 -->
<script>
$(function(){
    //初始裁剪效果
    init_crop();
    //异步上传图片
    var options = { 
        url:        "{:addons_url('Avatar://Avatar/upavatar')}",
        success:function(data){
            console.log(data);
            $(".cutbox").html(" ");
            $(".cutbox").html('<img id="avatar-img" width="300" src="' + data.fullpath + '" alt="">');
            $("input[name='pic_id']").val(data.pic_id);
            $("input[name='s_path']").val(data.s_path);
            //$("#avatar-img").attr('src',data.url);
            init_crop();
        }
    }; 
    $("#avatar").change(function(){
        $('#avatar_form').ajaxSubmit(options)
    })
});
//裁剪效果实现
function init_crop(){
    $('.cutbox > img').cropper({
      aspectRatio: {$config['scale']},
      cropBoxResizable: false,
      dragMode:'none',
      crop: function(data) {
        // 出来裁切后的图片数据.
        $("input[name='w']").val(data.width);
        $("input[name='h']").val(data.height);
        $("input[name='x']").val(data.x);
        $("input[name='y']").val(data.y);
      }
    });
}
</script>